/*
* @Author: 'zhangqiaojuan'
* @Date: 2023-06-12 14:25:50
* @LastEditors: Yejing
* @LastEditTime: 2023-07-04 15:08:58
* @Description: desc
*/
<template>
    <view class="tabbar-group">
        <view class="content-group">
            <view class="tabbar-content">
                <view class="tabbar-item" v-for="(item,index) in tabbarList" :key="index"
                      @click="tabbarChange(index,item.path)">
                    <view class="tabbar-activity" v-if="current == index">
                        <view class="icon-group activity-item">
                            <text :class="`iconfont ${item.activityIcon} activity-icon`"></text>
                        </view>
                        <view class="activity-item">
                            <text class="activity-text">{{ item.text }}</text>
                        </view>
                    </view>
                    <view class="tabbar" v-else>
                        <text :class="`iconfont ${item.icon}`"></text>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {number, string} from "mathjs";

export default {
    name: "shopsTabbar",
    props: {
        current: 0,
        shopId: {
            type: String,
            default:"0",
        }
    },
    data() {
        return {
            tabbarList: [{
                text: this.$t('pages.home'),
                icon: 'icon-home',
                activityIcon: 'icon-home-activity',
                path: '/pages/shop/index?shopId='+this.shopId
            }, {
                text: this.$t('product.name'),
                icon: 'icon-Document',
                activityIcon: 'icon-product-activity',
                path: '/pages/shop/productList?shopId=' + this.shopId
            },
            //     {
                //     text: '动态',
                //     icon: 'icon-dynamic',
                //     activityIcon: 'icon-dynamic-activity',
                //     path: '/pages/shop/dynamic?shopId=' + this.shopId
                // },
                {
                text: this.$t('anchorConsole.category'),
                icon: 'icon-categories',
                activityIcon: 'icon-categories-activity',
                path: '/pages/shop/allCategories?shopId=' + this.shopId
            },]
        };
    },
    methods: {
        tabbarChange(index, path) {
            if (this.current == index) {
                return false;
            }
            uni.redirectTo({
                url: path
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@keyframes widthTo {

  /* 开始 */
  from {
    width: 60rpx;
  }

  to {
    width: 156rpx;
  }
}

@keyframes iconToLeft {

  /* 开始 */
  from {
    right: 0;
  }

  to {
    right: 92rpx;
  }
}

.tabbar-group {
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.8879);
  z-index: 999;
  // filter: blur(29.920000076293945px);
  .content-group {
    position: relative;
    z-index: 999;
    width: 100%;
    border-radius: 60rpx 60rpx 0rpx 0rpx;
    background: #FFFFFF;
    // padding: 0 40rpx;

    .tabbar-content {
      position: relative;
      z-index: 999;
      width: 100%;
      height: 140rpx;
      padding: 0 60rpx;
      background: #FFFFFF;
      box-shadow: 0rpx -4rpx 14rpx 0rpx rgba(0, 0, 0, 0.102);
      border-radius: 60rpx 60rpx 0rpx 0rpx;

      display: flex;
      justify-content: space-around;
      align-items: center;

    }

    .tabbar-activity {
      // width: 160rpx;
      height: 60rpx;
      width: 200rpx !important;
      border-radius: 30rpx;
      position: relative;
      background: #EEEEEE;
      padding-right: 16rpx;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      overflow: hidden;
      justify-content: flex-end;
      animation: widthTo 0.3s ease-in 0.1s forwards;

      .icon-group {
        width: 60rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        background: #1B1D29;
        border-radius: 60rpx;
        // margin-right: 6rpx;

        position: absolute;
        top: 0;
        left: 0;
        animation: iconToLeft 0.3s ease-in 0.1s forwards;
      }

      .activity-icon {
        font-size: 30rpx;
      }

      .activity-text {
        color: #1B1D29;
        font-size: 24rpx;
        letter-spacing: 2rpx
      }
    }

    .tabbar {
      font-size: 32rpx;
    }
  }

}
</style>
